<template>
  <ul>
    <ul>
      <li v-for="item in hotlist" :key="item.id">
        <div class="mov">
          <router-link :to="'/item/' + item.id">
            <div class="lk">
              <div class="lk-left">
                <img :src="item.img" alt="" />
              </div>
              <div class="lk-right">
                <div class="lk-right-1">
                  <div>
                    <span>{{ item.nm }}</span>
                    <span><img src="../assets/img/3dlogo.png" alt="" /></span>
                  </div>
                  <div>
                    <span
                      v-if="item.showCinemaNum === 0 && item.showNum == 0"
                    ></span>
                    <span
                      v-else-if="
                        item.scoreLabel == '猫眼购票评分' &&
                        item.showCinemaNum !== 0
                      "
                      >观众评</span
                    >
                    <span
                      v-else-if="
                        (item.scoreLabel == '暂无评分') &
                        (item.showCinemaNum !== 0)
                      "
                      >暂无评分</span
                    >
                    <span
                      class="eight"
                      v-if="item.sc % 1 === 0 && item.sc !== 0"
                      >{{ item.sc }}.0</span
                    >
                    <span class="eight" v-else-if="item.sc % 1 !== 0">{{
                      item.sc
                    }}</span>
                    <span class="eight" v-else-if="item.showCinemaNum == 0"
                      >{{ item.wish }}<span class="spe">人想看</span></span
                    >
                  </div>
                  <div class="zi">
                    {{ item.star }}
                  </div>
                  <div>
                    {{ item.showInfo }}
                  </div>
                </div>
                <div
                  class="lk-right-2"
                  :style="
                    item.preSale
                      ? { background: '#3c9fe6' }
                      : { background: '#f03d37' }
                  "
                >
                  {{ item.preSale ? "预售" : "购票" }}
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </li>
    </ul>
  </ul>
</template>

<script>
export default {
  props: ["hotlist"],
  name: "MainHot",
};
</script>

<style lang="less" scoped>
.lk {
  width: 100%;
  height: 3.04rem;
  overflow: hidden;
  // border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
}

.lk-left img {
  width: 1.706667rem;
  height: 2.4rem;
  margin-left: -26px;
}

.lk-right {
  width: 240px;
  height: 2.346667rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: -60px;
}

.lk-right-1 {
  width: 5.5rem;
  height: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  color: #666;
  font-size: 0.346667rem;
  margin-left: -10px;
  position: relative;
}

.lk-right-1 > div:nth-child(1) {
  margin-top: -3px;
  display: flex;
}

.lk-right-1::after {
  content: "";
  display: inline-block;
  width: 8rem;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 2.666667rem;
}
.lk-right-1 > div:nth-child(1) > span:nth-child(1) {
  font-size: 0.453333rem;
  display: inline-block;
  color: #333;
  font-weight: 700;
  height: 22px;
  width: 5.12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: start;
}

.lk-right-1 > div:nth-child(1) > span:nth-child(2) img {
  width: 1.146667rem;
  height: 0.373333rem;
  display: inline-block;
}

.eight {
  font-weight: 700;
  color: #faaf00;
  font-size: 0.4rem;
}

.zi {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lk-right-2 {
  width: 1.44rem;
  height: 0.746667rem;
  /* background: #f03d37; */
  border-radius: 1.266667rem;
  text-align: center;
  line-height: 0.746667rem;
  color: #fff;
  margin-right: -20px;
  font-size: 0.373333rem;
}
</style>